<template>
  <div class="loginPage page-exp">
    <pageHeader @openloginBox="openloginBox" @openRegisterBox="openRegisterBox"></pageHeader>
    <div class="bgImg">
      <div class="loginArea" v-if="isLogin">
        <i class="el-icon-close" @click="closeLoginArea"></i>
        <div class="header">
          <span :class="currentIndex == 1 ? 'isActive' : ''" @click="login">账号登录</span>
          <span :class="currentIndex == 2 ? 'isActive' : ''" @click="register">注册</span>
        </div>
        <!-- 登录 -->
        <div v-if="loginArea">
          <el-form :model="ruleForm" :rules="rules" ref="loginForm" class="demo-ruleForm">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入用户名/身份证/手机号" clearable></el-input>
            </el-form-item>
            <el-form-item prop="psword">
              <el-input type="password" v-model="ruleForm.psword" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <h6 class="forget" @click="forgetPassBox">忘记密码</h6>
          </el-form>
          <el-button type="primary" @click="loginSubmit('loginForm')">登录</el-button>
        </div>
        <!-- 注册 -->
        <div v-if="!loginArea">
          <el-form :model="ruleForm" :rules="rules" ref="regForm" class="demo-ruleForm">
            <el-form-item prop="nickName" class="inline">
              <el-input v-model="ruleForm.nickName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item prop="idNumber" class="inline">
              <el-input v-model="ruleForm.idNumber" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item class="inline" prop="work">
              <el-select v-model="ruleForm.work" placeholder="请选择工种">
                <el-option :label="item.label" :value="item.value" v-for="item in jobList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="inline" prop="depart">
              <el-select v-model="ruleForm.depart" placeholder="选择项目部">
                <el-option :label="item.label" :value="item.value" v-for="item in departList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="verificationCode">
              <el-input v-model="ruleForm.verificationCode" placeholder="请输入验证码"></el-input>
              <el-button type="text" class="getCode" @click="getCode">获取验证码</el-button>
            </el-form-item>
            <el-form-item prop="regPassword">
              <el-input v-model="ruleForm.regPassword" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-button type="primary" :disabled="disabled" @click="registerSubmit('regForm')">注册</el-button>
            <el-checkbox v-model="ruleForm.checked">
              登录或注册请勾选同意
              <span class="agreeTxt" @click="agreement">用户协议</span>
            </el-checkbox>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
export default {
  name: "login",
  components: {
    pageHeader,
  },
  watch: {
    "ruleForm.checked": {
      handler(v) {
        this.disabled = v ? false : true;
      },
      immediate: true,
    },
  },
  data() {
    return {
      isLogin: true, //弹框
      loginArea: true, //true登录 false注册
      disabled: true,
      currentIndex: 1,
      wechartImg: require("@/assets/img/login/wechart.png"),
      qqImg: require("@/assets/img/login/qq.png"),
      ruleForm: {
        name: "",
        psword: "",
        nickName: "",
        idNumber: "",
        phone: "",
        verificationCode: "",
        regPassword: "",
        work: "",
        depart: "",
        checked: false,
      },
      jobList: [],
      departList: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入用户名/身份证/手机号",
            trigger: "blur",
          },
        ],
        psword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        nickName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        work: [
          {
            required: true,
            message: "请选择工种",
            trigger: "change",
          },
        ],
        depart: [
          {
            required: true,
            message: "选择项目部",
            trigger: "change",
          },
        ],
        idNumber: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        verificationCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],

        regPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 关闭登录注册框
    closeLoginArea() {
      this.isLogin = false;
    },
    agreement() {
      window.open("/wisdomlearn/agreement.html", "_blank");
    },
    getJobList() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/base/selectAllWorkType",
          method: "post",
          headers: {
            accessToken: "",
            appId: that.config.appId,
            userId: "",
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/base/selectAllWorkType", time),
            timestamp: time,
          },
        })
        .then((res) => {
          if (res && res.retCode == "00000") {
            that.jobList = res.data.map((v) => {
              return {
                label: v.name,
                value: v.workTypeId,
              };
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDepartList() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/base/selectAllDepartment",
          method: "post",
          headers: {
            accessToken: "",
            appId: that.config.appId,
            userId: "",
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/base/selectAllDepartment", time),
            timestamp: time,
          },
        })
        .then((res) => {
          if (res && res.retCode == "00000") {
            that.departList = res.data.map((v) => {
              return {
                label: v.name,
                value: v.id,
              };
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 登录按钮
    loginSubmit(loginForm) {
      let that = this;
      that.$refs[loginForm].validate((valid) => {
        if (valid) {
          let time = new Date().valueOf();
          that
            .$http({
              url: "/wisdomlearn/user/v1/userLoginPassword",
              method: "post",
              headers: {
                accessToken: "",
                appId: that.config.appId,
                clientId: "",
                userId: "",
                sign: that.tool.sign("/wisdomlearn/user/v1/userLoginPassword", time),
                timestamp: time,
              },
              data: {
                phone: that.ruleForm.name,
                password: that.ruleForm.psword,
              },
            })
            .then((res) => {
              if (res && res.retCode == "00000") {
                that.$message({
                  message: "登录成功！",
                  type: "success",
                });
                that.tool.setCookie("xinyun-front-token", res.data.accessToken);
                that.config.token = res.data.accessToken;
                that.tool.setCookie(
                  "xinyun-front-userInfo",
                  JSON.stringify({
                    userId: res.data.userId,
                  })
                );
                that.getUserInfo(res.data.userId);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
    getUserInfo(userId) {
      let that = this;
      that
        .$http({
          url: "/wisdomlearn/user/v1/queryuserInfo",
          method: "post",
          headers: {
            clientId: "",
          },
        })
        .then((res) => {
          that.tool.setCookie(
            "xinyun-front-userInfo",
            JSON.stringify({
              name: res.data.username,
              userId: res.data.userId,
              icon: res.data.pictureUrl,
            })
          );
          that.$router.push({
            path: "/home",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 注册按钮
    registerSubmit(regForm) {
      let that = this;
      let bodyData = {
        username: that.ruleForm.nickName,
        cardId: that.ruleForm.idNumber,
        phone: that.ruleForm.phone,
        verificationCode: that.ruleForm.verificationCode,
        password: that.ruleForm.regPassword,
        workTypeId: that.ruleForm.work,
        departmentId: that.ruleForm.depart,
      };
      that.$refs[regForm].validate((valid) => {
        if (valid) {
          let time = new Date().valueOf();
          that
            .$http({
              url: "/wisdomlearn/user/v1/register",
              method: "post",
              headers: {
                accessToken: "",
                appId: that.config.appId,
                clientId: "",
                sign: that.tool.sign("/wisdomlearn/user/v1/register", time),
                timestamp: time,
              },
              data: bodyData,
            })
            .then((res) => {
              if (res.retCode == "00000") {
                that.$message({
                  message: "注册成功！",
                  type: "success",
                });
              } else {
                console.log(err);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
    // 获取验证码
    getCode() {
      let that = this;
      if (that.ruleForm.phone == "") {
        that.$message({
          message: "请输入手机号",
          type: "error",
        });
      } else {
        let time = new Date().valueOf();
        that
          .$http({
            url: "/wisdomlearn/sendMsg/sendMsgCode",
            method: "post",
            headers: {
              accessToken: "",
              appId: that.config.appId,
              clientId: "",
              sign: that.tool.sign("/wisdomlearn/sendMsg/sendMsgCode", time),
              timestamp: time,
            },
            data: {
              phone: that.ruleForm.phone,
            },
          })
          .then((res) => {
            if (res.retCode == "70001") {
              that.$message({
                message: res.retInfo,
                type: "error",
              });
            }
            if (res.retCode == "00000") {
              that.$message({
                message: "验证码发送成功！",
                type: "success",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    openloginBox() {
      this.isLogin = true;
      this.loginArea = true;
      this.currentIndex = 1;
      this.login();
    },
    openRegisterBox() {
      this.isLogin = true;
      this.loginArea = false;
      this.currentIndex = 2;
      this.register();
    },
    //忘记密码
    forgetPassBox() {
      this.$router.push("/forgetPass");
    },
    login() {
      this.loginArea = true;
      this.currentIndex = 1;
    },
    register() {
      this.loginArea = false;
      this.currentIndex = 2;
      this.getJobList();
      this.getDepartList();
    },
  },
};
</script>
<style scoped>
.loginPage {
  width: 100%;
  height: 100vh;
}
.bgImg {
  flex: 1;
  min-width: 1200px;
  position: relative;
  background-image: url(".././assets/img/login/bgImg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  object-fit: contain;
}
.el-icon-close {
  font-size: 20px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.loginArea {
  width: 400px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 23px;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -250px;
  margin-right: -500px;
  padding: 20px 40px;
  box-sizing: border-box;
}
.loginArea .header {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10px;
}
.loginArea .header span {
  font-size: 24px;
  color: #161617;
  letter-spacing: 0.09px;
  cursor: pointer;
}
.header span.isActive {
  color: #1968bb;
}
.forget {
  width: 100%;
  font-size: 12px;
  color: #a5a5a5;
  letter-spacing: 0.06px;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.loginArea .getCode {
  color: #1968bb;
  letter-spacing: 0.08px;
  font-size: 13px;
  position: absolute;
  right: 0;
}
.agreeTxt {
  color: #1968bb;
}
</style>
<style>
.loginArea .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 13px;
  padding: 0 0 0 10px;
}
.loginArea .el-button--primary {
  width: 100%;
  height: 50px;
  font-size: 21px;
  color: #f9f9f9;
  letter-spacing: 0.08px;
  background: #1968bb;
  border-radius: 9px;
  margin: 10px 0 25px 0;
}
.loginArea .el-button--primary.is-disabled {
  background-color: #a0cfff;
  border-color: #a0cfff;
}
.loginArea .el-checkbox {
  width: 100%;
  text-align: center;
  color: #909090;
  margin-bottom: 20px;
}
.loginArea .el-divider__text {
  color: #909090;
  font-size: 12px;
}
.loginArea .el-button + .el-button {
  margin-left: 0;
}
.loginArea .el-form-item {
  margin-bottom: 20px;
}
.loginArea .el-form-item.inline {
  width: 50%;
  display: inline-block;
}
.loginArea .el-form-item.inline {
  width: 48%;
  display: inline-block;
  margin-right: 4%;
}
.loginArea .el-form-item.inline:nth-child(2n) {
  margin-right: 0;
}
</style>
